<template>
  <div class="el-aside">
    <div class="menu" :style="{ width: isCollapse ? '65px' : '210px' }">
      <div class="logo jac">
        <img src="@/assets/images/logo.svg" alt="logo" />
        <span v-show="!isCollapse">后台管理系统</span>
      </div>
      <el-scrollbar>
        <el-menu
          class="el_menu_max"
          background-color="#191a20"
          text-color="#fff"
          active-text-color="#ffd04b"
          :default-active="activeMenu"
          :collapse="isCollapse"
          :unique-opened="false"
          :collapse-transition="false"
          mode="vertical"
        >
          <SidebarItem
            v-for="route in menuList"
            :key="route.meta.title + route.path"
            :base-path="route.path"
            :item="route"
          />
        </el-menu>
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import SidebarItem from './SidebarItem.vue'
export default {
  name: 'Sidebar',
  components: {
    SidebarItem
  },
  data() {
    return {}
  },
  computed: {
    ...mapGetters(['isCollapse', 'menuList']),
    activeMenu() {
      const { meta, path } = this.$route
      if (meta.activeMenu) {
        return meta.activeMenu
      }
      return path
    }
  },
  created() {},
  methods: {}
}
</script>

<style lang="scss" scoped>
$logH: 55px;

.el-aside {
  width: auto;
  overflow: inherit;
  flex-shrink: 0;
  box-sizing: border-box;
  background-color: #191a20;
  .menu {
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: all 0.3s ease;
    .logo {
      height: $logH;
      box-sizing: border-box;
      border-bottom: 1px solid #282a35;
      img {
        width: 28px;
        object-fit: contain;
        margin-right: 6px;
      }
      span {
        font-size: 21.5px;
        font-weight: bold;
        color: #dadada;
        white-space: nowrap;
      }
    }
    ::v-deep .el-scrollbar {
      height: calc(100% - #{$logH});
      .el-scrollbar__wrap::-webkit-scrollbar {
        display: none;
      }
    }
  }
}
.el_menu_max {
  border-right: none;
}
</style>
